<template>
    <div class="qrcode">
        <div class="code">
            <!-- decode是扫描结果的函数，torch用于是否需要打开手电筒，init用于检查该设备是否能够调用摄像头的权限，camera可用于打开前面或者后面摄像头  -->
            <qrcode-drop-zone @decode="onRichScanCallback">
                <qrcode-stream @decode="onRichScanCallback" @init="onInit" :camera="camera" />
                <div class="code-button">
                    <button class="iconfont icongw-icon-guangbi" @click="turnCameraOff"></button>
                </div>
                <!-- <div class="qr-scanner-box">
          <div class="qr-scanner">
            <div class="box">
              <div class="line"></div>
              <div class="angle"></div>
            </div>
          </div>
        </div> -->
            </qrcode-drop-zone>
        </div>
    </div>
</template>

<script>

// 引用vue-qrcode-reader插件
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader';

export default {
    name: 'Approve',
    props: {
        camera: {
            type: String,
            default: 'off'
        },
        qrcode: {
            type: Boolean,
            default: false
        },
        noStreamApiSupport: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {};
    },

    created () { },
    watch: {
        qrcode (newvalue, oldvalue) {
            this.qrcode = newvalue;
            if(this.qrcode) {
                this.onInit();
            }
        },
        camera (newvalue, oldvalue) {
            this.camera = newvalue;
        }
    },
    components: {

        // 注册组件
        QrcodeStream,
        QrcodeDropZone,
        QrcodeCapture
    },
    methods: {

        // 关闭相机
        turnCameraOff () {
                this.$emit('changeCamera', 'off')
                this.$emit('changeQrcode', false)
        },

        // 检查是否调用摄像头
        async onInit (promise) {
             try {
                await promise;
            } catch (error) {
                // this.turnCameraOff();
                try { myJavaFun.RichScan(); } catch (e) {
                    console.log(e);
                }
                // console.log(111,error)
                // if (error.name === 'StreamApiNotSupportedError') {
                // } else if (error.name === 'NotAllowedError') {
                //     this.errorMessage = 'Hey! I need access to your camera';
                // } else if (error.name === 'NotFoundError') {
                //     this.errorMessage = 'Do you even have a camera on your device?';
                // } else if (error.name === 'NotSupportedError') {
                //     this.errorMessage =
                //         'Seems like this page is served in non-secure context (HTTPS, localhost or file://)';
                // } else if (error.name === 'NotReadableError') {
                //     this.errorMessage =
                //         "Couldn't access your camera. Is it already in use?";
                // } else if (error.name === 'OverconstrainedError') {
                //     this.errorMessage =
                //         "Constraints don't match any installed camera. Did you asked for the front camera although there is none?";
                // } else {
                //     this.errorMessage = 'UNKNOWN ERROR: ' + error.message;
                // }
            }
        },

        onRichScanCallback(res) {
            this.$emit('onRichScanCallback', res)
            // this.turnCameraOff();
            // this.$router.push({ path: '/index/scanResults', query: { assetInfo: res } });
        },
    }
};
</script>

<style lang='scss' scoped>
.qrcode {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}
.code {
    height: 100%;
    > div {
        height: 100%;
    }
    .code-button {
        position: absolute;
        top: 10px;
        left: 10px;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        overflow: hidden;
        background: #fff;
        z-index: 999999;
        > button {
            border-radius: 50%;
            background: transparent;
            border: 0px;
            width: 100%;
            height: 100%;
            font-size: 13px;
            text-align: center;
        }
    }
}
.qr-scanner-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    .qr-scanner {
        background-image: linear-gradient(
                0deg,
                transparent 24%,
                rgba(32, 255, 77, 0.1) 25%,
                rgba(32, 255, 77, 0.1) 26%,
                transparent 27%,
                transparent 74%,
                rgba(32, 255, 77, 0.1) 75%,
                rgba(32, 255, 77, 0.1) 76%,
                transparent 77%,
                transparent
            ),
            linear-gradient(
                90deg,
                transparent 24%,
                rgba(32, 255, 77, 0.1) 25%,
                rgba(32, 255, 77, 0.1) 26%,
                transparent 27%,
                transparent 74%,
                rgba(32, 255, 77, 0.1) 75%,
                rgba(32, 255, 77, 0.1) 76%,
                transparent 77%,
                transparent
            );
        background-size: 3rem 3rem;
        background-position: -1rem -1rem;
        width: 100%;
        height: 100vh;
        position: relative;
        background-color: #1110;

        .box {
            width: 213px;
            height: 213px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            border: 0.1rem solid rgba(0, 255, 51, 0.2);
        }

        .line {
            height: calc(100% - 2px);
            width: 100%;
            background: linear-gradient(
                180deg,
                rgba(0, 255, 51, 0) 43%,
                #00ff33 211%
            );
            border-bottom: 3px solid #00ff33;
            transform: translateY(-100%);
            animation: radar-beam 2s infinite alternate;
            animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
            animation-delay: 1.4s;
        }
    }
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
    content: "";
    display: block;
    position: absolute;
    width: 3vw;
    height: 3vw;

    border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
    top: 0;
    border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
    bottom: 0;
    border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
    left: 0;
    border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
    right: 0;
    border-right-color: #00ff33;
}

@keyframes radar-beam {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}
</style>


